<script setup lang="ts">
    
</script>

<template>
  <div class="common-layout">
    <el-container :style="{height: '100%'}">
      <el-header class="header" height="50px" :style="{backgroundColor: 'red'}"></el-header>
      <el-container class="main">
        <el-aside class="main-menu" style="background-color: #FFFFFF; margin-left: 20px; margin-bottom: 20px; border-radius: 15px;">
            <div class="logo">Logo</div>
            <el-menu default-active="2" class="menu">
                <el-menu-item index="1" class="menu-item">
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Dashboard</span>
                    <div class="bord"><img width="100%" src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
                <el-menu-item index="2" class="menu-item">
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Projects</span>
                    <div class="bord"><img src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
                <el-menu-item index="3" class="menu-item">
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Calendar</span>
                    <div class="bord"><img src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
                <el-menu-item index="4" class="menu-item">
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Vacations</span>
                    <div class="bord"><img src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
                <el-menu-item index="5" class="menu-item">
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Employees</span>
                    <div class="bord"><img src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
                <el-menu-item index="6" class="menu-item">
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Messenger</span>
                    <div class="bord"><img src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
                <el-menu-item index="7" class="menu-item">    
                    <el-icon><Menu /></el-icon>
                    <span slot="title">Info Portal</span>
                    <div class="bord"><img src="@renderer/assets/images/active-icon.png" alt=""></div>
                </el-menu-item>
            </el-menu>
            
        </el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>  
.common-layout{
    height: 100%;
    background: radial-gradient(circle at top right,#661e1e,#414345);
    .header{
        -webkit-app-region: drag;
    }
    .main{
        .main-menu{
            width: 200px;
            .logo{
                width: 50px;
                height: 50px;
                background-color: rgba(63, 140, 255, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 8px;
                color: #FFFFFF;
                margin-top: 40px;
                margin-left: 24px;
            }
            .menu{
                border: none;
                margin-top: 42px;
                padding-left: 16px;
                .menu-item{
                    height: 44px;
                    width: 172px;
                    border-radius: 10px;
                    position: relative;
                    .bord{
                        width: 4px;
                        height: 100%;
                        position: absolute;
                        right: -8px;
                        top: 0;
                        display: flex;
                        opacity: 0;
                    }
                }
                :deep(.is-active) {
                    // background-color: rgba(63, 140, 255, 0.1);
                    .bord{
                        opacity: 1 !important;
                    }
                }
            }
        }
    }
}
</style>